﻿@page "/card-group"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    CardGroup
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Use the Radzen Blazor <strong>CardGroup</strong> component to visually stick RadzenCards next to each other.
</RadzenText>

<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    By default the CardGroup is responsive and Cards wrap one below the other on screen sizes smaller than 576px. Use <code>Responsive="false"</code> to disable responsiveness.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo three cards for <strong>Team 1</strong>, <strong>Team 2</strong>, and <strong>Team 3</strong> display progress percentages (55%, 32%, 76%) with progress bars, with controls to toggle <code>Responsive</code> behavior and select card <code>Variant</code> (Filled, Flat, Outlined, Text).
</RadzenText>

<RadzenExample ComponentName="CardGroup" Example="CardGroupConfig">
    <CardGroupConfig />
</RadzenExample>